<template>
  <div>
    <div>
      <a-button
        @click="backClient"
        type="primary"
        style="margin-right: 20px"
        class="frebtn"
        >返回客户列表</a-button
      >
      <a-button @click="deriveDetail" class="frebtn">导出明细</a-button>
    </div>
    <div class="top">
      <div id="components-form-demo-advanced-search">
        <a-row :gutter="24" style="margin-bottom: 15px">
          <a-col :span="6">
            <div class="label">业务类型选择：</div>
            <a-select
              style="width: 70%"
              show-search
              option-filter-prop="children"
              v-model="searchData.businessType"
              allowClear
              @change="changeBusinessType"
              placeholder="全部业务类型"
            >
              <a-select-option
                :name="item.lable"
                :value="item.value"
                v-for="item in businessTypes"
                :key="item.value"
              >
                {{ item.lable }}
              </a-select-option>
            </a-select>
          </a-col>
          <!-- <a-col :span="6">
            <div class="label">费用项选择：</div>
            <a-select
              style="width: 70%"
              show-search
              option-filter-prop="children"
              v-model="searchData.ruleName"
              allowClear
              @change="changeCost"
              placeholder="全部业务类型"
            >
              <a-select-option
                :name="item.currency"
                :value="item.currency"
                v-for="item in costs"
                :key="item.sysCurrencyId"
              >
                {{ item.currency }}
              </a-select-option>
            </a-select>
          </a-col> -->
          <a-col :span="6">
            <div class="label">仓库选择：</div>
            <a-select
              style="width: 70%"
              ref="warehousing"
              show-search
              placeholder="请选择"
              option-filter-prop="children"
              :filter-option="filterOption"
              @change="changeWarehouse"
              v-model="searchData.sysStoreHouseId"
            >
              <a-select-option
                :value="item.warehouseId"
                v-for="item in clientWareHouse"
                :key="item.warehouseId"
                :name="item.titleName"
              >
                {{ item.titleName }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :span="6">
            <div class="label">选择时间：</div>
            <a-range-picker
              style="width: 60%"
              :placeholder="['年/月/日', '年/月/日']"
              format="YYYY-MM-DD"
              v-model="dateTime"
              @change="DateChange"
            />
          </a-col>
          <a-col>
            <span style="margin-left: 20px">
              <a-button type="primary" class="top-btn" @click="searchBtn">
                查询
              </a-button>
              <a-button
                type="primary"
                class="top-btn"
                style="margin-left: 10px"
                @click="resetBtn"
              >
                重置
              </a-button>
            </span>
          </a-col>
        </a-row>
      </div>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <div class="total">
        <div>
          费用总计：<span style="color: #f00">{{ monneySum }}</span>
        </div>
        <div>
          实际费用总计：<span style="color: #f00">{{ realMonneySum }}</span>
        </div>
      </div>
      <a-table :data-source="tableData" :pagination="false">
        <a-table-column key="tenantId" data-index="tenantId" align="center">
          <span slot="title">客户</span>
          <template slot-scope="text, record">
            {{ record.tenantId }}
          </template>
        </a-table-column>
        <!-- 仓库 -->
        <a-table-column
          key="sysStoreHouseName"
          data-index="sysStoreHouseName"
          align="center"
        >
          <span slot="title">仓库</span>
          <template slot-scope="text, record">
            {{ record.sysStoreHouseName }}
          </template>
        </a-table-column>
        <!-- 时间 -->
        <a-table-column
          key="settlementTime"
          data-index="settlementTime"
          align="center"
        >
          <span slot="title">时间</span>
          <template slot-scope="text, record">
            {{ record.settlementTime }}
          </template>
        </a-table-column>
        <!-- 业务类型 -->
        <a-table-column
          key="businessName"
          data-index="businessName"
          align="center"
        >
          <span slot="title">业务类型</span>
          <template slot-scope="text, record">
            <span>{{ record.businessName }}</span>
          </template>
        </a-table-column>
        <!-- 费用项 -->
        <a-table-column key="ruleName" data-index="ruleName" align="center">
          <span slot="title">费用项</span>
          <template slot-scope="text, record">
            <span>{{ record.ruleName }}</span>
          </template>
        </a-table-column>

        <!-- 费用 -->
        <a-table-column key="sumOfMoney" data-index="sumOfMoney" align="center">
          <span slot="title">费用</span>
          <template slot-scope="text, record">
            <span>{{ record.sumOfMoney }}</span>
          </template>
        </a-table-column>
        <!-- 折扣 -->
        <!-- <a-table-column
          key="discountFormer"
          data-index="discountFormer"
          align="center"
        >
          <span slot="title">折扣</span>
          <template slot-scope="text, record">
            <span
              :style="
                record.discountFormer && record.discountFormer != 100
                  ? 'color: #f00'
                  : ''
              "
              >{{
                !record.discountFormer || record.discountFormer == "100"
                  ? "无"
                  : (record.discountFormer * 1) / 10 + "折"
              }}</span
            >
          </template>
        </a-table-column> -->
        <!-- 实际费用 -->
        <a-table-column
          key="sumOfMoneyNegate"
          data-index="sumOfMoneyNegate"
          align="center"
        >
          <span slot="title">实际费用</span>
          <template slot-scope="text, record">
            <span>{{ record.sumOfMoneyNegate || 0 }}</span>
          </template>
        </a-table-column>
        <!-- 币种 -->
        <a-table-column
          key="settlementCurrencyName"
          data-index="settlementCurrencyName"
          align="center"
        >
          <span slot="title">币种</span>
          <template slot-scope="text, record">
            <span>{{ record.settlementCurrencyName }}</span>
          </template>
        </a-table-column>
      </a-table>
    </a-spin>
    <!-- 分页器
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div> -->
    <LookBillModal />
  </div>
</template>

<script>
import { mapState } from "vuex";
import LookBillModal from "./LookBillModal";

import {
  clientBill_getDetailList,
  clientBill_exportDetails,
  clientBill_getDropDown,
} from "@/apis/system/FinanceManagement/clientBill";

import req from "@/utils/req";
export default {
  props: ["parentData"],
  components: {
    LookBillModal,
  },
  data() {
    return {
      monneySum: 0,
      realMonneySum: 0,
      expand: false,
      billFlag: false,
      costs: [],
      businessTypes: [],
      spinning: false,
      dateTime: [],
      tableData: [],
      total: 5,
      searchData: {
        sysStoreHouseId: undefined,
        businessType: undefined,
      },
    };
  },
  mounted() {
    this.getSelect();
    this.getDetailList(); //获取列表
  },
  methods: {
    //获取下拉
    async getSelect() {
      let res = await clientBill_getDropDown();
      if (res.code == "200") {
        this.businessTypes = res.responseBody;
      }
    },
    //改变费用项
    changeCost() {},
    //改变业务类型
    changeBusinessType() {},
    //改变仓库
    changeWarehouse() {},
    //导出明细
    async deriveDetail() {
      let res = await clientBill_exportDetails(
        this.parentData.tenantId,
        this.searchData
      );
      if (res) {
        req.exportFile(
          `${this.parentData.periodStartTime}-${this.parentData.periodEndTime}-交易明细-${this.parentData.tenantId}-${this.parentData.nickName}`,
          res
        );
      }
    },
    //查询接口
    searchBtn() {
      this.getDetailList();
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getDetailList();
    },
    //页码变更
    showChange(current, size) {
      this.searchData.current = current;
      this.searchData.size = size;
      this.getDetailList();
    },
    //重置按钮
    resetBtn() {
      this.searchData.startTimeValue = null;
      this.searchData.endTimeValue = null;
      this.searchData.sysStoreHouseId = undefined;
      this.searchData.businessType = undefined;
      this.dateTime = [];
      this.getDetailList();
    },
    //搜索日期选择器
    DateChange(date, dateString) {
      date;
      if (dateString && dateString.length > 0 && dateString[0] != "") {
        this.searchData.startTimeValue = `${dateString[0]} 00:00:00`; //年月日后面必须要有个空格
        this.searchData.endTimeValue = `${dateString[1]} 23:59:59`; //年月日后面必须要有个空格
      } else {
        this.searchData.startTimeValue = null;
        this.searchData.endTimeValue = null;
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    backClient() {
      setTimeout(() => {
        this.$emit("backClient");
      }, 50);
    },
    //获取列表接口
    async getDetailList() {
      this.spinning = true;
      let res = await clientBill_getDetailList(
        this.parentData.tenantId,
        this.searchData
      );
      if (res.code == "200") {
        // this.total = res.responseBody.total * 1;
        this.tableData = res.responseBody.result;
        this.monneySum = res.responseBody.sumOfMoney;
        this.realMonneySum = res.responseBody.actualPrice;
        this.spinning = false;
      }
    },
  },
  computed: {
    ...mapState(["clientWareHouse"]),
  },
};
</script>

<style lang="less" scoped>
.remarks-item {
  display: flex;
  align-items: center;
  .ant-input {
    margin-right: 5px;
    height: 30px;
  }
}
.action {
  span {
    margin: 0 5px 0 0;
  }
}
#components-form-demo-advanced-search {
  padding: 5px;
  input {
    width: 60%;
  }
  .ant-col {
    display: flex;
    align-items: center;
    .label {
      width: 100px;
      text-align: right;
    }
  }
}
.top-btn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.top-btn:hover {
  background: #3eae7c;
  color: #fff;
}
.frebtn {
  background-color: #66b1ff;
  color: #fff;
  border: #66b1ff;
}
.frebtn:hover {
  background-color: #66b1ff;
  color: #fff;
  border: #66b1ff;
}
.total {
  margin-right: 5%;
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 16px;
  justify-content: flex-start;
  font-weight: bold;
  > div {
    text-align: right;
  }
}
</style>
